<template>
    <a-card :bordered='false' :active-tab-key='tabKey' :tab-list='tabList' @tabChange='key => setTabKey(key)'>
        <div v-show='tabKey == 1'>
            <div :class='$style.form'>
                <a-form autocomplete='off' :label-col='{ span: 3 }' :model='formData' @finish='submit'>
                    <a-form-item label='指数' name='code'>
                        <a-checkbox-group v-model:value='formData.code'>
                            <a-row>
                                <template v-for='(item, index) in options' :key='index'>
                                    <a-col :span="8">
                                        <a-checkbox :value='item.value'>{{item.label}}</a-checkbox>
                                    </a-col>
                                </template>
                            </a-row>
                        </a-checkbox-group>
                    </a-form-item>
                    <a-form-item label='短信接收' name='mobile_notice'>
                        <a-switch v-model:checked='formData.mobile_notice' checked-children='开' un-checked-children='关' />
                    </a-form-item>
                    <a-form-item label='产品通知' name='msg_notice'>
                        <a-switch v-model:checked='formData.msg_notice' checked-children='开' un-checked-children='关' />
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 3 }">
                        <a-button type='primary' html-type='submit' :loading='loading'>保存</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
        <div v-show='tabKey == 2'>
            
        </div>
    </a-card>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'

    import { indexSignalDetailApi, changeIndexSignalApi } from '@/api/indexSignal'
import { message } from 'ant-design-vue';
    

   
    const tabKey = ref(1)
    const tabList = reactive([
      {
        key: 1,
        tab: '设置',
      },
      {
        key: 2,
        tab: '详情',
      },
    ]);


    const options = reactive<any[]>([])

    const formData = reactive({
        code : [],
        mobile_notice : false,
        msg_notice : false,
    })

    const loading = ref(false)




    function setTabKey(key) {
        tabKey.value = key
    }

    indexSignalDetailApi().then(res => {
        const data = res.data
        if(data.index_list) {
            for(let k in data.index_list) {
                options.push({value : k, label : data.index_list[k]})
            }
        }

        if(data.code) {
            formData.code.push(...data.code)
        }

        formData.mobile_notice = data.mobile_notice == 1
        formData.msg_notice = data.msg_notice == 1
    })

    async function submit(values) {
        let params:any = JSON.parse(JSON.stringify(values))
        loading.value = true
        const res = await changeIndexSignalApi(params)
        loading.value = false
        if(res.success) {
            message.success('保存成功')
        }else {
            message.error(res.message)
        }
        
    }

</script>

<style lang='scss' module>
    .form{
        width: 600px;
    }
</style>